<div class="row">

  <!-- Accept Oracle license Modal -->
  <modal #acceptOracleLicenseModal (onDismiss)="dismissOrCloseAcceptOracleLicenseModal('dismiss')">
    <modal-header [show-close]="false">
      <h4 class="modal-title">Warning!</h4>
    </modal-header>
    <modal-body>
      <div class="row" style="padding-left: 7%; padding-right: 7%; padding-top: 5%; padding-bottom: 5%;">
      <p style="text-align: justify">
        In order to connect Teleporter to your Oracle database, you need to download the Oracle Database JDBC Driver.<br><br>
        By downloading this driver, you must accept the OTN License Agreement terms.<br><br>
        For more info about the OTN License Agreement please visit the link <br>
      </p>
      <p style="text-align: center">
        <a href="http://www.oracle.com/technetwork/licenses/distribution-license-152002.html" target="_blank">
          http://www.oracle.com/technetwork/licenses/distribution-license-152002.html
        </a>
      </p>
      </div>
    </modal-body>
    <modal-footer [show-default-buttons]="false">
      <button type="button" class="btn btn-default" data-dismiss="modal" (click)="dismissOrCloseAcceptOracleLicenseModal('reject')">Reject</button>
      <button type="button" class="btn btn-primary" (click)="dismissOrCloseAcceptOracleLicenseModal('accept')">Accept</button>
    </modal-footer>
  </modal>

  <form class="form-horizontal" id="teleporterForm" name="teleporterForm" #form="ngForm">

    <div id="stepSwitch" [ngSwitch]="getStep()">

      <div class="stepOne" *ngSwitchCase="'1'">

        <h4>
          <div class="row">
            <div class="col-md-6">
              <span>&nbsp;&nbsp;&nbsp;Step 1: Source Database connection</span>
            </div>
            <div class="col-md-6 importer-header-right">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary disabled">Prev</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('2')" [disabled]="!form.valid">Next</button>
              </div>
              <div class="btn-group pull-right">
                <button type="button" class="btn btn-sm btn-primary" (click)="testConnection()">Test connection</button>
              </div>
            </div>
          </div>
        </h4><br/><br/>

        <div class="form-group">
          <label class="col-sm-2 control-label">Database Driver</label>

          <div class="col-md-5">
            <select class="form-control" name="driver" [(ngModel)]="config.driver"
                    (ngModelChange)="changeJurlAccordingToDriver()" required>
              <option *ngFor="let driverName of driverNames" [value]="driverName"> {{driverName}} </option>
            </select>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.driver" data-trigger="hover" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Database Host</label>
          <div class="col-md-5">
            <input type="text" id="host" class="form-control" name="host" [(ngModel)]="dbConnection.host"
                   (ngModelChange)="updateJurl()"
                   placeholder="Host" required ngControl="hostControl"/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.host" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Port</label>
          <div class="col-md-5">
            <input type="text" id="port" class="form-control" name="port" [(ngModel)]="dbConnection.port"
                   (ngModelChange)="updateJurl()"
                   placeholder="Port" required ngControl="hostControl"/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.port" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group" *ngIf="config.driver != 'Oracle'">
          <label class="col-sm-2 control-label">Database Name</label>
          <div class="col-md-5">
            <input type="text" id="dbName" class="form-control" name="dbName" [(ngModel)]="dbConnection.dbName"
                   (ngModelChange)="updateJurl()"
                   placeholder="Database Name" required ngControl="hostControl"/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.dbName" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group" *ngIf="config.driver == 'Oracle'">
          <label class="col-sm-2 control-label">SID</label>
          <div class="col-md-5">
            <input type="text" id="sid" class="form-control" name="sid" [(ngModel)]="dbConnection.sid"
                   (ngModelChange)="updateJurl()"
                   placeholder="SID" required ngControl="hostControl"/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.sid" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">User Name</label>
          <div class="col-md-5">
            <input type="text" id="username" class="form-control" [(ngModel)]="config.username" name="username"
                   placeholder="User Name" required/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.username" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Password</label>
          <div class="col-md-5">
            <input type="password" id="password" class="form-control" [(ngModel)]="config.password" name="password"
                   placeholder="Password" required/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.password" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>
      </div>

      <div class="stepTwo" *ngSwitchCase="'2'">
        <h4>
          <div class="row">
            <div class="col-md-6">
              <span>&nbsp;&nbsp;&nbsp;Step 2: Target OrientDB Database</span>
            </div>
            <div class="col-md-6 importer-header-right">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('1')">Prev</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('3')" [disabled]="!form.valid">Next (Advanced)</button>
              </div>
              <div class="btn-group pull-right">
                <button type="button" class="btn btn-sm btn-warning" (click)="launch()" [disabled]="!form.valid">Start migration</button>
              </div>
            </div>
          </div>
        </h4><br/><br/>

        <div class="form-group">
          <label class="col-sm-2 control-label">Connection Protocol</label>

          <div class="col-md-5">
            <select class="form-control" [(ngModel)]="config.protocol" name="protocol" required>
              <option *ngFor="let protocol of protocols" [value]="protocol"> {{protocol}} </option>
            </select>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.protocol" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">OrientDB Database Name</label>
          <div class="col-md-5">
            <input type="text" id="outDBName" class="form-control" [(ngModel)]="config.outDBName" name="outDBName"
                   placeholder="Database Name" required/>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.outDBName" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Strategy</label>

          <div class="col-sm-5">
            <select class="form-control" [(ngModel)]="config.strategy" name="strategy" required>
              <option *ngFor="let strategy of strategies" selected> {{strategy}} </option>
            </select>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.strategy" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Name Resolver</label>
          <div class="col-sm-5">
            <select class="form-control" [(ngModel)]="config.nameResolver" name="nameResolver">
              <option *ngFor="let nr of nameResolvers" selected> {{nr}} </option>
            </select>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.nameResolver" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Inheritance descriptor</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" [(ngModel)]="config.xmlPath" name="xmlPath"
                   placeholder="XML Path">
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.XMLPath" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Log Level</label>
          <div class="col-sm-5">
            <select class="form-control" [(ngModel)]="config.level" name="logLevel" required>
              <option *ngFor="let level of logLevels; let i = index" [value]="i">
                {{level}} </option>
            </select>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" data-html="true"
                    [attr.data-content]="hints.logLevel" data-animation="am-fade-and-scale"><b>?</b></button>
          </div>
        </div>

      </div>

      <div class="stepThree" *ngSwitchCase="'3'">
        <h4>
          <div class="row">
            <div class="col-md-6">
              <span>&nbsp;&nbsp;&nbsp;Step 3: Filters (Advanced)</span>&nbsp;
              <button type="button" class="btn btn-xs btn-primary" data-toggle="popover" data-placement="top" data-html="true"
                      [attr.data-content]="hints.tableList" data-animation="am-fade-and-scale"><b>?</b></button>
            </div>
            <div class="col-md-6 importer-header-right">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('2')">Prev</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('4')" [disabled]="!form.valid">Next (Advanced)</button>
              </div>
              <div class="btn-group pull-right">
                <button type="button" class="btn btn-sm btn-warning" (click)="launch()" [disabled]="!form.valid">Start migration</button>
              </div>
            </div>
          </div>
        </h4><br/><br/>

        <div class="form-group">
          <div class="col-md-offset-1 col-md-10">
            <dual-list [sort]="keepSorted" [source]="sourceDBTables" [key]="key" [display]="fieldToDisplay" [(destination)]="includedTables"
                       (destinationChange)="updateIncludedTables(includedTables)"
                       headerLeft="Source DB Tables" headerRight="Included Tables"
                       addBtn="Include" removeBtn="Exclude"
                       height="265px"></dual-list>
          </div>
        </div>

      </div>

      <div id="stepAdvanced" *ngSwitchCase="'4'">
        <h4>
          <div class="row">
            <div class="col-md-6">
              <span>&nbsp;&nbsp;&nbsp;Step 4: Model Mapping (Advanced)</span>
            </div>
            <div class="col-md-6 importer-header-right">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary" (click)="switchConfigStep('3')">Prev</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-primary disabled">Next</button>
              </div>
              <div class="btn-group pull-right">
                <button type="button" class="btn btn-sm btn-warning" (click)="launch()">Start migration</button>
              </div>
            </div>
          </div>
        </h4><br/><br/>
        <div class="border">
          <div class="col-sm-7">
            <graph-model-panel #graphPanel [(modellingConfig)]="modellingConfig" [(selectedElement)]="selectedElement"
                               [(onMigrationConfigFetched)]="onMigrationConfigFetched" (onSelectedElement)="changeSelectedElement($event)"
                               (onSaveConfigRequest)="saveConfiguration()"></graph-model-panel>
          </div>
          <div class="col-md-5">
            <detail-panel #detailPanel [(modellingConfig)]="modellingConfig" [(selectedElement)]="selectedElement"
                          (onElementRenamed)="renameElementInGraph($event)" (onSelectedElementRemoved)="removeElementInGraph($event)"></detail-panel>
          </div>
        </div>

      </div>


      <div class="running" *ngSwitchCase="'running'">

        <h4>
          <div class="row">
            <div class="col-md-6">
              <span>&nbsp;&nbsp;&nbsp;Migration to OrientDB</span>
            </div>
          </div>
        </h4><br/><br/>

        <div class="row ">
          <div class="col-md-10" *ngIf="job.cfg">
            <div class="studio-well-tips-sm col-md-6">
              <h5>
            <span class="tab">
              <b> Status</b>: {{ job.status }}
            </span>
              </h5>
              <h5>
            <span class="tab">
               <b>From</b>: {{ job.cfg.jurl }}
            </span>
              </h5>
              <h5>
            <span class="tab" *ngIf="config.protocol === 'plocal'">
              <b>To</b>: {{job.cfg.protocol}}:$ORIENTDB_HOME/databases/{{job.cfg.outDBName}}
            </span>
                <span class="tab" *ngIf="config.protocol === 'memory'">
              <b>To</b>: {{job.cfg.protocol}}:{{job.cfg.outDBName}}
            </span>
              </h5>
            </div>
          </div>
          <div class="col-md-2">
            <div class="btn-group">
              <button type="button" class="btn btn-md btn-primary" (click)="switchConfigStep('1')" [disabled]="jobRunning">New Migration</button>
            </div>
          </div>
        </div>
        <div class="row row-space-2x">
          <div class="col-md-12">
              <textarea  #logArea class="form-control" id="logArea" name="logArea" [(ngModel)]="job.log"
                         rows="15" readonly style="height: 400px;"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12"></div>
        </div>

      </div>

    </div>

  </form>

</div>
